<template>
    <div class="box">
      <div class="login">
        <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm" label-width="0" class="login_form">
        <el-form-item prop="uname">
          <el-input type="text" v-model="loginForm.uname" placeholder="用户名" class="input1"></el-input>
        </el-form-item>
        <el-form-item prop="upassword">
          <el-input type="password" v-model="loginForm.upassword" placeholder="密码" class="input2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitForm('loginForm')" class="btn">登录</el-button>
        </el-form-item>
        </el-form>
      </div>
    </div>
    
  </template>
  
  <script>
  export default {
    name: "UserLogin",
    data() {
        return {
          loginForm: {
            uname: '',
            upassword: '',
          },
          // 表单验证规则对象
          loginFormRules: {
            // 验证用户名是否合法
            uname: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            upassword: [
              { required:true,message:'请输入密码', trigger:'blur'},
              { min:6,max:15,message:'长度在 6 到 15 个字符',trigger:'blur'}
            ]
          }
      }
    },
    methods:{
        submitForm(loginForm) {
          // validate函数对整个表单进行校验
          // valid是布尔值，验证结果
          this.$refs[loginForm].validate((valid) => {
            // console.log(valid);//true/false
            if (valid) {
              const {uname,upassword}=this.loginForm
              this.$store.dispatch('login',{uname,upassword})              
              if(this.token){
                this.$router.push('/sys')
              }
            } else {
              // 不符合校验规则
              console.log('error submit!!');
              return false;
            }
          });
        }
    },
    computed:{
      token(){
        return this.$store.state.login.token
      }
    }
  };
  </script>
  
  <style lang='less' scoped>
    .box{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        
        background:url(../../assets/images/background.jpg);
        background-size:cover;
        .login{
            background-color: rgb(235, 249, 235);
            width: 400px;
            height: 260px;
            // 居中
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            // 边框
            border-radius: 30px;
            box-shadow: 6px 6px 6px 6px green;
            .login_form{
              padding: 34px;
              .input1,.input2{
                margin: 8px auto;
                }
                .input1{
                }
                .btn{
                  display: block;
                  margin: 0 auto;
                }
            }
            
        }
    }
  </style>